<template>
  <div>
    <component
      v-if="component"
      :is="component"
      v-model="activeComponent"></component>
  </div>
</template>
<script setup>
  import { inject, watch, shallowRef } from 'vue';
  import { activeComponent } from '@/views/editor/hooks/use-editor';
  import buttonProps from '@/components/props/button-props.vue';
  import textProps from '@/components/props/text-props.vue';
  const componentsMap = {
    button: buttonProps,
    text: textProps,
  };
  const component = shallowRef(null);
  watch(
    () => activeComponent.value,
    (newVal) => {
      component.value = componentsMap[newVal.name];
    }
  );
  const config = inject('editorConfig');
</script>
<style scoped lang="less"></style>
